<template>
	<view style="padding-bottom: 100upx" class="home">
		<!-- #ifdef MP-WEIXIN -->
			<uni-nav-bar fixed="true" status-bar="true" :border="border" backgroundColor="#f2bed2;">	
				<view slot="left" @click="toHome()" style="border-top-right-radius: 25upx;border-bottom-right-radius: 25upx;font-size: 50upx ;width: 65upx;height: 50upx;line-height: 50upx;background-color: rgba(255,255,255,0.2);color: #FFFFFF;padding-left: 20upx;" class="">
					<image class="returnIco" src="/static/images/small.png" mode=""></image>
				</view>
				
				<view style="height: 50upx;line-height: 50upx;color: #fff;font-size: 30upx;margin-left: -30px;" class="">
					全球购 
				</view>					
			</uni-nav-bar>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS || H5 -->
			<view style="background-color: #f2bed2;" class="status_bar">
				<view style="background-color: #f2bed2;" class="top_view"></view>  
			</view>
			<view style="display: flex;" class="topCenter">
				<view @click="toHome()" style="border-top-right-radius: 25upx;border-bottom-right-radius: 25upx;font-size: 50upx ;width: 65upx;height: 50upx;line-height: 50upx;background-color: rgba(255,255,255,0.2);color: #FFFFFF;padding-left: 20upx;" class="">
					<image class="returnIco" src="/static/images/small.png" mode=""></image>
				</view>
				<view style="height: 50upx;line-height: 50upx;" class="fs24 Cfff pl20">
					全球购
				</view>
			</view>
		<!-- #endif -->
		
		<view class="NavList" >
			<view :class ="[(activeflag == 'aaa') ? 'active2':'']" @click="tabNav('aaa',item)"  class="searchBLi">
				首页
			</view>
			<view :class ="[(activeflag == index) ? 'active2':'']" @click="tabNav(index,item.gc_id)"  class="searchBLi" v-for="(item,index) in NavList" :key="index">
		 		{{item.gc_name}}
		 	</view>
		 </view>
		
		
		<view v-if="activeflag == 'aaa'">
			<view v-for="(xxx,index) in dataLis" :key="index">
				<view v-if="xxx.hasOwnProperty('adv_list')">
					<view style="width:712;margin:0 auto;padding-top: 20upx;" class="banner1">
						<view class="page-section-spacing">
									<swiper class="swiper1" :circular="circular" :indicator-dots="indicatorDots" autoplay="true" interval="2000" duration="500"	>					
										<swiper-item v-for="(lb,index2) in  xxx.adv_list.item" :key="index2">			
											<image @click="commonNavto(lb.data,lb.type)"  style="width: 100%;" :src="lb.image" mode="widthFix"></image>
										</swiper-item>		
									</swiper>	
						</view>
					</view>	
				</view>
				
				<view v-if="xxx.hasOwnProperty('notice_list')" v-for="(scrolltip,index2) in xxx" :key="index2" class="swiper1B">
					<!-- <marquee behavior="" direction="">{{scrolltip.item[0].notice_list_name}}</marquee>			 -->
					<view style="width:500;height:80upx;margin:0 auto;" class="">
						<view class="page-section-spacing">
							<swiper class="swiper1" 
								vertical="true"
								:circular="circular"
								:indicator-dots="indicatorDots"
								autoplay="true" 
								interval="4000" 
								duration="400"	>					
								<swiper-item v-for="(aa,index) in scrolltip.item" :key="index">								
									<navigator style="display: inline-block;padding-top: 4upx;" :url="aa.notice_list_data">{{aa.notice_list_name}}</navigator>								
								</swiper-item>		
							</swiper>				
						</view>
					</view>	
				</view>
				
				
				<view v-if="xxx.hasOwnProperty('home3')">
					<view v-for="(images1,index3) in xxx" :key="index3" style="display: flex;justify-content: space-between;padding: 0 20upx;flex-wrap: wrap;" class="">	
						<image @click="images2.type=='url' && commonNavto(images2.data)" v-for="(images2,index4) in images1.item" :key="index4" style="width: 345upx;margin-top: 20upx;" :src="images2.image" mode="widthFix"></image>				
					</view>
				</view>
				
				<view v-if="xxx.hasOwnProperty('home5')">
					<view v-for="(images1,index4) in xxx" :key="index4" style="display: flex;justify-content: space-between;padding: 0 20upx;margin-top: 40upx;" class="">
						<image @click="images2.type=='url' && commonNavto(images2.data)" v-for="(images2,index5) in images1.item" :key="index5" style="width: 231upx;" :src="images2.image" mode="widthFix"></image>		 	
					 </view>
				</view>
				
				<view v-if="xxx.hasOwnProperty('goods')">
					<view v-for="(good,index6) in xxx" :key="index6" class="products">
						<view @click="toDetail(good2.goods_id)"  v-for="(good2,index7) in good.item" :key="index7" class="product">
							<image :src="good2.goods_image" mode="widthFix"></image>
							<view class="productInfo twoline lh35 C333">{{good2.goods_name}}</view>
							<view class="lh50 productP">
								<!-- <text class="Ce13d97 fs22">{{good2.goods_promotion_price}}</text> <text class="strick fs18 C999 pl20">￥{{good2.goods_price}}</text>					 -->
								<text class="Ce13d97 fs22">￥{{good2.goods_promotion_price}}</text> <text class="fs18 C999 pl20">销量：{{good2.goods_salenum || 0}}</text>					
							</view>
						</view>					
					</view>
				</view>
				
				<view v-if="xxx.hasOwnProperty('home1')" v-for="(scrolltip,index2) in xxx" :key="index2">
					<view v-if="scrolltip.title" v-for="(title1,index8) in xxx" :key="index8" class="title"  @click="commonNavto(title1.data,title1.type)">
						{{title1.title}}
					</view>
					<view style="width: 100%; font-size: 0;" v-if="scrolltip.image" class="scrolltip.image" @click="commonNavto(xxx.home1.data)">
						<image style="width: 100%;height: 10rpx;" :src="scrolltip.image" mode="widthFix"></image>
					</view>
					
					<!-- <view @click="commonNavto(title1.data,title1.type)" v-if="title1.title" v-for="(title1,index8) in xxx" :key="index8" class="title">
						{{title1.title}}
					</view>
					<view style="width: 100%;" v-if="scrolltip.image" class="">
						<image @click="commonNavto(title1.data,title1.type)" style="width: 100%;height: 320upx;margin-top: 60upx;" :src="title1.image" mode="widthFix"></image>
					</view> -->
				</view>
				
				<view v-if="xxx.hasOwnProperty('home2')">
					<view v-for="(onetwo,index9) in xxx" :key="index9" style="display: flex;justify-content: space-between;padding: 0 20upx;height: 345upx;margin-top: 40upx;">
						<view class="">
							<image @click="onetwo.rectangle1_type=='url' && commonNavto(onetwo.rectangle1_data)" style="width: 345upx;" :src="onetwo.square_image" mode="widthFix"></image>			
						</view>				
						<view style="display: flex;justify-content: space-between;flex-direction: column;">
							<image @click="onetwo.rectangle2_type=='url' && commonNavto(onetwo.rectangle2_data)" style="width: 345upx;" :src="onetwo.rectangle1_image" mode="widthFix"></image>
							<image @click="onetwo.square_type=='url' && commonNavto(onetwo.rectangle2_data)" style="width: 345upx;" :src="onetwo.square_image" mode="widthFix"></image>
						</view>
					</view>
				</view>
				
				<view v-if="xxx.hasOwnProperty('home4')">
					<view v-for="(onetwo,index10) in xxx" :key="index10" style="display: flex;justify-content: space-between;padding: 0 20upx;height: 345upx;margin-top: 40upx;">
						<view style="display: flex;justify-content: space-between;flex-direction: column;">
							<image @click="commonNavto(onetwo.rectangle1_data,onetwo.rectangle1_type)" style="width: 345upx;" :src="onetwo.rectangle1_image" mode="widthFix"></image>
							<image @click="commonNavto(onetwo.rectangle2_data,onetwo.rectangle2_type)" style="width: 345upx;" :src="onetwo.rectangle2_image" mode="widthFix"></image>
						</view>
						<view class="">
							<image @click="commonNavto(onetwo.square_data,onetwo.square_type)" style="width: 345upx;" :src="onetwo.square_image" mode="widthFix"></image>			
						</view>				
					</view>
				</view>

				<view  v-if="xxx.hasOwnProperty('home6')">
					<view v-for="(onefour,index11) in xxx" :key="index11" style="display: flex;justify-content: space-between;padding: 0 20upx;height: 162upx;margin-top: 40upx;">
						<image v-for="(onefour2,index12) in onefour.item" :key="index12" style="width: 162upx;" :src="onefour2.image" mode="widthFix"></image>							
					</view>
				</view>
				
				<view  v-if="xxx.hasOwnProperty('navigation')"  style="background-color: #FFFFFF;border-radius: 10rpx;">
					<view v-if="xxx.navigation.item.length<=5"  style="background-color: #FFFFFF;">
						<view class="" style="display: flex;flex-wrap:wrap;padding-left: 8upx;">
							<view @click="test1(item.navigation_data)" class="logoLi" v-for="(item,index2) in xxx.navigation.item" :key="index2">
								<image :src="item.image" mode="widthFix"></image>
								<view class="fs21 C333">{{item.navigation_name}}</view>
							</view>
						</view>
						
					</view>	
						
					<scroll-view v-else scroll-x="true"  style="background-color: #FFFFFF;">
							<view :style="'width:'+iconWidth+'upx'">
								<view class="" style="display: flex;flex-wrap:wrap;padding-left: 8upx;">
									<view @click="test1(item.navigation_data)" class="logoLi" v-for="(item,index2) in xxx.navigation.item" :key="index2">
										<image :src="item.image" mode="widthFix"></image>
										<view class="fs21 C333">{{item.navigation_name}}</view>
									</view>
								</view>
							</view>
					</scroll-view>
				
			</view>
			</view>
		</view>
		
		
		
		<view v-else>
			<view style="" class="products" >
				<view  @click="goodsInfo(item.goods_id)" v-for="(item,index) in NavListData" :key="index" class="product">
							<view v-if="item.title" class="zk">{{item.title}} </view>
						
							<view class="ImgBox"><image :src="item.goods_image_url" mode="image"></image></view>
							
					
					<view class="productInfo twoline lh35 C333"><text class="is_tv" v-if="item.is_tv==1">自营</text>{{item.goods_name}}</view>
					<view class="lh50 productP">
						<text class="Ce13d97 fs22">￥{{item.goods_promotion_price}}</text> <text class="strick fs18 C999 pl20">￥{{item.goods_marketprice}}</text>
					</view>
				</view>				
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				NavList:[{gc_name:"aa",gc_id:1},{gc_name:"bb",gc_id:2}],
				border:false,
				lbLis:[],  //轮播
				scrollMsg:[],//滚动标题
				titles:[],//标题
				twotwo:[],//两行两列
				onethree:[],//一行三列
				goodsLis:[],
				dataLis:[],
				indicatorDots:false,
				circular:true,	
				active1flag:0,
				active2flag:0,
				bottomBtn:[
					{"name":"首页","img1":"../../static/images/home_bottom11.png","img2":"../../static/images/home_bottom12.png","toUrl":"../home/home"},
					{"name":"分类","img1":"../../static/images/home_bottom21.png","img2":"../../static/images/home_bottom22.png","toUrl":"../sort/sortPage"},
					{"name":"分销","img1":"../../static/images/home_bottom31.png","img2":"../../static/images/home_bottom32.png","toUrl":"../distribution/list"},
					{"name":"购物车","img1":"../../static/images/home_bottom41.png","img2":"../../static/images/home_bottom42.png","toUrl":"../car/shopCar"},
					{"name":"会员中心","img1":"../../static/images/home_bottom51.png","img2":"../../static/images/home_bottom52.png","toUrl":"/pages/home/Personal_Center"}
				],
				activeflag:'aaa',
				NavListData:[],
				curpage2:1,
				bottonLisFirstid:1,
				iskey:""
			}
		},
		
		onLoad() {
			this.getlis()
			this.getNavList()
		},
		methods: {
			tabNav(index,gc_id){
				this.activeflag=index
				this.curpage2=1
				if(index!="aaa"){
					this.bottonLisFirstid=gc_id
					this.getNavgoosd()
				}
			},
			getNavgoosd(state){//获取导航商品列表
				var that=this	
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=goods_list',
					method: 'get',
					data: {
						"gc_id":that.bottonLisFirstid,
						curpage:this.curpage2,
						key:this.iskey,
						is_global:1
					},
				}).then(function(res) {
					if(state){
						that.NavListData= that.NavListData.concat(res.datas.goods_list)  
					}else{
						that.NavListData=res.datas.goods_list
					}
					if(res.datas.paged.hasmore){
						that.curpage2++;
					}else{
						that.curpage2=false;
					}
					
				})
			},
			getNavList(){//获取头部导航
				var that=this		
				this.$util.request({
					url: '/mobile/index.php?act=mb_global&op=recommend_class',
					method: 'get',
					data: {
					},
				}).then((res)=> {					
					this.NavList=res.datas.list
					this.bottonLisFirstid=res.datas.list[0].gc_id
				})
			},
			commonNavto(url,type){
				
				url=url.replace(/amp;/g,"")
				url=url.trim()	
				if(url.indexOf('/home')!=-1 && url.indexOf('/home2')==-1){		
					uni.switchTab({
						url:"/main/home/home"
					})
				}
				else if(url.indexOf('/home')!=-1 && url.indexOf('/home2')!=-1){
					// alert(url)
					uni.navigateTo({
						url:"/main/home/home2"
					})
				}
				else if(url.indexOf('/category/classification') != -1){
					uni.switchTab({
						url:"/main/category/classification"
					})
				}
				else if(url.indexOf('/distribution/list') != -1){
					uni.switchTab({
						url:"/main/distribution/list"
					})
				}
				else if(url.indexOf('/cart/list') != -1){
					uni.switchTab({
						url:"/main/cart/list"
					})
				}
				else if(url.indexOf('/member/index') != -1){
					uni.switchTab({
						url:"/main/member/index"
					})
				}
				else if(type == 'url'){
					uni.navigateTo({
						url:url
					})
				}else if(type == 'keyword'){
					uni.navigateTo({
						url:"/mall/search/searchLis?searchValue="+url
					})
				}else if(type == 'goods'){
					uni.navigateTo({
						url:"/mall/goods/info?goods_id="+url
					})
				}else if(type == 'special'){
					uni.navigateTo({
						url:"/mall/special/index?special_id="+url
					})
				}
				
			},
			goodsInfo(id){
				uni.navigateTo({
					url:'/mall/goods/info?goods_id='+id
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+id
				})
			},
			getlis(){
				this.$util.request({
					url: '/mobile/index.php?act=mb_global&op=index',
					method: 'get',
					data: {
					
					},
				}).then((res) => {
					this.dataLis=res.datas
					for(let i=0;i<this.dataLis.length;i++){
						if(this.dataLis[i].hasOwnProperty('adv_list')){
							this.lbLis=this.dataLis[i].adv_list.item
						}
						if(this.dataLis[i].hasOwnProperty('home1')){
							if(this.dataLis[i].home1.style == 'roll'){
								this.scrollMsg.push(this.dataLis[i].home1)
								 // console.log(this.scrollMsg)
							}
						}
						if(this.dataLis[i].hasOwnProperty('home1')){
							if(this.dataLis[i].home1.style != 'roll'){
								this.titles.push(this.dataLis[i].home1)
								// console.log(this.titles)
							}
						}
						if(this.dataLis[i].hasOwnProperty('home3')){
							this.twotwo.push(this.dataLis[i].home3)
							// console.log(this.twotwo)
						}
						if(this.dataLis[i].hasOwnProperty('home5')){
							this.onethree.push(this.dataLis[i].home5)
							// console.log(this.onethree)
						}
						if(this.dataLis[i].hasOwnProperty('goods')){
							this.goodsLis.push(this.dataLis[i].goods)
							console.log(this.goodsLis)
						}
						

						
					}
				})
			},
			toHome(){
				uni.navigateBack({
					
				})
			},			
			tab2(index,url){
				this.active2flag=index
				console.log(this.active2flag);
				uni.switchTab({
					url:url
				})
			}			
		}
	}
</script>

<style>
	.swiperLast{
		height: 50upx;
		margin-bottom: 120upx;
	}
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #fca2a2;
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #fca2a2;  
	    top: 0;  
	    z-index: 999;  
	}
	.lh20{
		line-height: 20upx;
		height: 20upx;
	}
	.lh25{
		line-height: 25upx;
	}
	.lh30{
		line-height: 30upx;
	}
	.lh35{
		line-height: 35upx;
	}
	.lh40{
		line-height: 40upx;
	}
	.lh45{
		line-height: 45upx;
	}
	.lh50{
		line-height: 50upx;
	}
	.C000{
		color: #000000;
	}
	.Ce13d97{
		color: #ff4300;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.Cc06{
		color: #ff4300;
	}
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}

	.flex{		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.line1{
		width: 430upx;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.pr30{
		padding-right: 30upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.tac{
		text-align: center;
	}
	.Ce5258e{
		color: #e5258e;
	}
	.Cccc{
		color: #CCCCCC;
	}
	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}		
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24upx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */
	}
	.home{
		background: url(@/static/images/home_topbgc2.png),#FFFFFF;
		background-position-y: -200upx;
		background-size: 100% 482upx;
		background-repeat: no-repeat;
		/* #ifdef APP-PLUS || H5 */
		padding-top: 20upx;
		/* #endif */		
	}
	.homeTop{
		box-sizing: border-box;
		background-color: #fca2a2;
		position: fixed;
		z-index: 9999999;
		left: 0;
		top: 0;
		/* height: 80upx; */
		width: 100%;
		/* padding: 0 34upx 0 24upx; */
	}
	.homeTop view{
		/* height: 80upx;
		line-height: 80upx;
		padding-top: 2upx; */
	}
	.input1{
		/* width: 100%;
		background-color: #fca2a2;
		position: fixed;
		z-index: 9999999;
		left: 0;
		top: 80upx; */
	}
	.input1 input{
		border: 1upx solid #f4f4f4;
		width: 704upx;
		height: 61upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		margin: 10upx auto;
	}
	.input1 image{
		position: absolute;
		width: 50upx;
		height: 50upx;
		top: 85upx;
		right: 70upx;

	}
	.swiper4{
		width: 710upx;
		height: 302upx;
		margin: 0 auto;
	}
	.swiper3{		
		width: 705upx;
		height: 345upx;
		margin: 0 auto;
	}
	.swiper2{
		width: 710upx;
		height: 300upx;
		margin: 0 auto;
	}
	.swiper1{
		width: 712upx;
		height: 380rpx;
		margin: 0 auto;
	}
	.swiper1 swiper-item{
		border-radius: 10upx;
	}
	.swiper1 image{
		border-radius: 10upx;
	}
	.swiper1B{
		box-sizing: border-box;
		padding-left: 94upx;
		color: #FFFFFF;
		margin: 10upx auto;
		font-size: 30upx;
		width: 712upx;
		height: 60upx;
		line-height: 62upx;
		background: url(@/static/images/home_lb.png) 34upx 10upx no-repeat,#ffdbdb;
		background-size: 45upx 45upx;
	}
	.logoLis{
		box-sizing: border-box;
		width: 100%;
		padding: 0 10upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.logoLi{
		width: 146upx;
		/* height: 160upx; */
		text-align: center;
	}
	.logoLi image{
		width: 100upx;
		/* height: 100upx; */
		border-radius: 50%;
	}
	.logoLi view{
		line-height: 20upx;
	}
	.title{
		padding-left: 20upx;
		margin-top: 56upx;
		margin-bottom: 10upx;
		font-weight: bold;
		font-size: 36upx;
		color: #333333;
	}
	
	.logo2Lis{
		box-sizing: border-box;
		width: 100%;
		padding: 0 24upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.logo2Li{
		position: relative;
		z-index: 1;
		width: 340upx;
		height:245upx;
		text-align: center;
		margin-top: 22upx;
		border-radius: 10upx;
	}
	.logo2Li image{		
		width: 340upx;
		height:245upx;		
	}
	.logo2LiName{
		position: absolute;
		z-index: 10;
		left: 31upx;
		top: 34upx;
		font-size: 36upx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.logo2LiDiscount{
		position: absolute;
		z-index: 10;
		left: 31upx;
		top:92upx;
		font-size: 27upx;
		color: #FFFFFF;
	}
	
	.logo2LiBtn{
		position: absolute;
		z-index: 10;
		left: 31upx;
		top: 187upx;
		width: 146upx;
		height: 36upx;
		line-height: 36upx;
		border-radius: 18upx;
		font-size: 24upx;
		color: #ff4300;
		text-align: center;
		background-color: #fff;
	}
	
	.logo3Lis{
		margin-top: 20upx;
		box-sizing: border-box;
		width: 100%;
		padding: 0 24upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.logo3Li{
		position: relative;
		z-index: 1;
		width: 230upx;
		height:240upx;
	}
	.logo3Li image{		
		width: 230upx;
		height:240upx;	
	}
	.logo4Lis{
		margin-top: 20upx;
		box-sizing: border-box;
		width: 100%;
		padding: 0 24upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.logo4Li{
		position: relative;
		z-index: 1;
		width: 231upx;
		height:170upx;
	}
	.logo4Li image{		
		width: 231upx;
		height:170upx;	
	}
	.products{
		padding: 0 12px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.product{
		position: relative;
		box-sizing: border-box;
		width: 346upx;
		height: 487upx;
		border: 1upx solid #f4f4f4;
		margin-top: 10upx;
		border-radius: 15upx;
		background-color: #FFFFFF;
	}
	.product .ImgBox{
		width: 336upx;
		height: 340upx;
		overflow: hidden;
	}
	.product image{		
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
		width: 336upx;
		height: 340upx;
	}
	.productInfo{
		padding: 0 10upx;
		height: 70rpx;
	}
	.productP{
		padding: 0 10upx;
	}
	.bottom{
		box-sizing: border-box;
		padding: 0 10upx;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 99999999999;
		left: 0;
		bottom: 0;
		height: 98upx;
		width: 100%;
		box-shadow: 0upx -1upx 10upx rgba(0,0,0,0.8);
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.bottom view{
		font-size: 27upx;
		color: #666;
		text-align: center;
	}
	.bottom view.active2{
		color: #ff4300;
	}
	.bottom image{
		position: relative;
		top: 15upx;
		width: 33upx;
		height: 33upx;
	}
	.title2{
		margin-top: 76upx;
		margin-bottom: 0upx;
		height: 35px;
		padding-left: 20upx
	}
	.title2R{
		position: relative;
		top: 6upx;
	}
	.djs{
		
	}
	.djs .shi{
		display: inline-block;
		width: 36upx;
		height: 36upx;
		line-height: 36upx;
		text-align: center;
		font-weight: bold;
		background-color: #ff4300;
		color: #FFFFFF;
		border-radius: 8upx;
	}
	.djs .point{
		display: inline-block;
		width: 26upx;
		height: 36upx;
		line-height: 36upx;
		text-align: center;		
		font-weight: bold;
		color: #ff4300;
	}
	.loginBox{
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		z-index: 999999999;
		left: 0;
		/* #ifdef APP-PLUS */
		bottom: 0;
		/* #endif */
		
		/* #ifdef H5 */
		bottom: 100upx;
		/* #endif */
		
		height: 65upx;
		line-height: 65upx;
		background-color: rgba(0,0,0,0.5);
		padding: 0 20upx;
	}
	.loginBoxL{
		height: 65upx;
		line-height: 65upx;
	}	
	.loginBoxR{
		border-radius: 33upx;
		margin-top: 7upx;
		width: 165upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		background-color: #ff4300;
	}

	.searchB{
		box-sizing: border-box;
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		background-color: #FFFFFF;
		border: 1px solid #f4f4f4;
		line-height: 80upx;
		height: 80upx;
	}
	.searchB.searchBActive{
		position: fixed;
		/* #ifdef APP-PLUS */
		bottom: 0upx;
		/* #endif */
		/* #ifdef H5 */
		bottom: 100upx;
		/* #endif */
	}
	.searchBLi{
		display: inline-block;
		padding: 0 15upx;
		font-size: 31upx
	}
	.searchB view.active1{
		font-weight: bold;
		border-bottom:4upx solid #f00; ;
		color: #f00;
	}
	.oneLine{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.Ce5007e{
		color: #e5007e;
	}
	
	.uni-navbar__header-btns{
		padding-left: 0upx !important;
	}
	.returnIco{
		width: 20rpx;
		height: 30rpx;
		margin-left: 10rpx;
		margin-top: -10rpx;
	}
	.NavList{
		box-sizing: border-box;
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		line-height: 40px;
		height: 40px;
		padding: 0 12px;
		border: 0 !important;
		margin: 0rpx 0 0rpx; 
		/* background-color: #d7d3d5 !important; */
		color: #333;
		
	}
	.active2{
		font-size: 40rpx !important;
		font-weight: bold;
		color: #c02047;
	}
	.bottom view.active2{
		color: #ff4300;
	}
	.zk{
		/* width: 80upx; */
		padding: 0 15upx;
		height: 40upx;
		background-color:#ff4300;
		color: #FFFFFF;
		text-align: center;
		line-height: 40upx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		border-top-left-radius: 10upx;		
	}
</style>
